<template>
	<!-- 幸运轮盘容器 -->
	<view class="lucky-wheel-container" :style="containerStyle">
		<!-- 轮盘背景 -->
		<view class="lucky-wheel-bg">
			<slot v-if="$slots && $slots.bg" name="bg" />
		</view>
		<!-- 轮盘主体 -->
		<view class="lucky-wheel" :style="wheelStyle">
			<view class="lucky-wheel-wrap">
				<!-- 遍历奖项，创建每个扇形区域 -->
				<view v-for="(item, index) in prizes" :key="index" class="prize-item"
					:style="[getPrizeItemStyle(index)]">
					<view class="prize-content" :style="[getCorrectAngle(index)]">
						<!-- 扇形背景 -->
						<view class="prize-content-bg">
							<image v-if="getPrizeBgImage(index)" :src="getPrizeBgImage(index)"
								style="width: 100%;height: 100%;" />
						</view>
						<slot :item="item" :index="index">
							<text class="prize-name">{{ item.name }}</text>
							<view class="prize-pro">
								<image :src="item.image" style="width: 98rpx;height: 70rpx;"></image>
								<view class="prize-pro-txt">{{item.pro}}</view>
							</view>
						</slot>
					</view>
				</view>
			</view>
		</view>
		<!-- 指针 -->
		<view class="pointer">
			<view v-if="$slots && $slots.pointer" class="pointer-heart">
				<slot name="pointer" class="pointer-heart" />
			</view>
			<view v-else class="pointer-triangle pointer-heart" @click="$emit('run')"></view>
		</view>
		<!-- 添加闪光灯容器 -->
		<view class="lights-container">
			<view v-for="(light, index) in lights" :key="index" class="light" :style="[getLightStyle(index)]">
				<image v-if="lightImgs.length > 0" :src="getCurrentImage(index)"
					style="width: 100%;height: 100%;position: absolute;left: 0;right: 0;" />
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * LuckyWheel 组件属性定义
	 * @property {Array} prizes - 奖项列表
	 * @property {Number} [size=600] - 轮盘大小
	 * @property {String} [customStyle] - 轮盘自定义样式
	 * @property {Object} [styleOpt] - 样式选项
	 * @property {String} [innerStyle="width: 85%;height:85%"] - 内部样式
	 * @property {Number} [turns=10] - 旋转圈数
	 * @property {Number} [duration=5000] - 旋转持续时间（毫秒）
	 * @property {Number} [lightNormalSpeed=1000] - 正常闪光灯速度
	 * @property {Number} [lighFastSpeed=50] - 快速闪光灯速度
	 * @property {String} [lightSize="26rpx"] - 闪光灯大小
	 * @property {Array} [lightColors=['#FF0000', '#FFFF00']] - 闪光灯颜色列表
	 * @property {Array} [lightImgs=[]] - 闪光灯图片列表
	 * @property {Array} [prizeBgImages=[]] - 扇形背景图数组
	 */
	export default {
		name: 'LuckyWheel',
		props: {
			prizes: {
				type: Array,
				required: true,
			},
			size: {
				type: Number,
				default: 600,
			},
			customStyle: {
				type: String,
			},
			styleOpt: {
				type: Object,
				default: () => ({
					prizeBgColors: ['#fff0a3', '#fffce6'],
					borderColor: '#ffd752',
				})
			},
			innerStyle: {
				type: String,
				default: `width: 85%;height:85%`
			},
			turns: {
				type: Number,
				default: 10
			},
			duration: {
				type: Number,
				default: 5000,
			},
			lightNormalSpeed: {
				type: Number,
				default: 1000
			},
			lighFastSpeed: {
				type: Number,
				default: 50
			},
			lightSize: {
				type: String,
				default: `26rpx`
			},
			lightColors: {
				type: Array,
				default: () => ['#FF0000', '#FFFF00']
			},
			lightImgs: {
				type: Array,
				default: () => []
			},
			prizeBgImages: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				rotating: false, // 是否正在旋转
				rotationAngle: 0, // 当前旋转角度
				// 设置指针默认指向的位置,现在是默认指向2个扇形之间的边线上
				rotateAngle: 0,
				rotateTransition: '',
				animationInterval: null,
				lights: [], // 用于存储闪光灯信息
				currentAnimationStep: 0,
				lightConfig: {
					animationSpeed: 1000, // 初始动画速度，单位毫秒
					totalLights: 0, // 总灯数，将在 mounted 中设置
				},
			};
		},
		computed: {
			// 计算轮盘样式
			containerStyle() {
				let {
					size,
					customStyle
				} = this;
				size = /\d$/.test(size) ? size + 'rpx' : size;
				return `width: ${size}; height: ${size}; ${customStyle}`;
			},

			wheelStyle() {
				return `
      	padding: ${this.styleOpt.padding};
      	transform: ${this.rotateAngle};
      	transition: ${this.rotateTransition};
      	${this.innerStyle}
      `;
			},

			getCorrectAngle() {
				return index => {
					const style = {
						transform: `skewY(${90 - 360 / this.prizes.length}deg) skewX(0deg) rotate(${180 / this.prizes.length}deg)`
					}
					if (this.prizes.length == 2) {
						if (index == 0) {
							style['transform'] = `rotate(90deg)`
							style['bottom'] = 0
						} else {
							style['transform'] = `rotate(0deg)`
							style['left'] = 0
							style['bottom'] = '-50%'
						}

					}
					return style
				};
			},
		},
		methods: {
			// 计算每个奖项扇形的样式
			getPrizeItemStyle(index) {
				const style = {
					transform: `rotate(${(360 / this.prizes.length) * index}deg) skewX(0deg) skewY(${360 / this.prizes.length - 90}deg)`,
				}
				if (this.prizes.length == 2) {
					style['transform'] = index == 0 ? 0 : `rotate(270deg)`
					style['top'] = 0
				}
				// 只有在没有背景图片时才设置背景色
				if (!this.getPrizeBgImage(index)) {
					style.backgroundColor = `${this.styleOpt.prizeBgColors[index % this.styleOpt.prizeBgColors.length]}`;
				}
				return style
			},
			// 开始旋转
			startRotation(index) {
				if (this.rotating) return;
				const duration = this.duration;
				const length = this.prizes.length;

				const rotateAngle = this.rotationAngle + this.turns * 360 + 360 - (180 / length + (360 / length) * index) -
					(this.rotationAngle % 360);
				this.rotationAngle = rotateAngle;
				this.rotateAngle = `rotate(${rotateAngle}deg)`;
				this.rotateTransition = `transform ${duration}ms cubic-bezier(0.250, 0.460, 0.455, 0.995)`;
				this.rotating = true;

				// 加速闪光灯动画
				this.accelerateLightAnimation();

				setTimeout(() => {
					this.$emit('done', index);
					this.rotating = false;
					this.stopSpinningAnimation();
					// 恢复正常速度
					this.resetLightAnimation();
				}, duration + 500);
			},

			accelerateLightAnimation() {
				this.stopLightAnimation();
				this.lightConfig.animationSpeed = this.lighFastSpeed;
				this.startLightAnimation();
			},

			resetLightAnimation() {
				this.stopLightAnimation();
				this.lightConfig.animationSpeed = this.lightNormalSpeed;
				this.startLightAnimation();
			},

			stopSpinningAnimation() {
				clearInterval(this.animationInterval);
				// cancelAnimationFrame(this.animationInterval);
			},
			// 对外暴露的启动方法
			run(index) {
				this.startRotation(index);
			},
			// 初始化闪光灯
			initLights() {
				this.lightConfig.totalLights = this.prizes.length * 2;
				this.lights = Array(this.lightConfig.totalLights).fill().map(() => ({}));
			},
			// 获取闪光灯样式
			getLightStyle(index) {
				const angle = (360 / this.lights.length) * index - 90;
				const radius = 44.5; // 使用 50% 作为半径
				const radian = angle * (Math.PI / 180);
				const x = 50 + radius * Math.cos(radian);
				const y = 50 + radius * Math.sin(radian);
				const style = {
					left: `${x}%`,
					top: `${y}%`,
					transform: 'translate(-50%, -50%)',
					width: this.lightSize,
					height: this.lightSize
				};
				if (this.lightImgs.length === 0) {
					style.backgroundColor = this.getCurrentColor(index)
					style.boxShadow = `0 0 5px ${this.getCurrentColor(index)}`
				}
				return style;
			},
			getCurrentColor(colorIndex) {
				if (this.lightImgs.length > 0) return ''; // 如果有图片，不返回颜色
				const totalSteps = this.lightColors.length;
				const currentStep = this.currentAnimationStep % totalSteps;
				const currentColorIndex = (colorIndex + currentStep) % totalSteps;
				return this.lightColors[currentColorIndex];
			},
			getCurrentImage(colorIndex) {
				if (this.lightImgs.length === 0) return ''; // 如果没有图片，返回空字符串
				const totalSteps = this.lightImgs.length;
				const currentStep = this.currentAnimationStep % totalSteps;
				const currentImageIndex = (colorIndex + currentStep) % totalSteps;
				return this.lightImgs[currentImageIndex];
			},
			startLightAnimation() {
				this.animationInterval = setInterval(() => {
					this.currentAnimationStep++;
					// 强制更新视图
					this.$forceUpdate();
				}, this.lightConfig.animationSpeed);
			},
			stopLightAnimation() {
				if (this.animationInterval) {
					clearInterval(this.animationInterval);
					this.animationInterval = null;
				}
			},
			// 新增：获取扇形背景图
			getPrizeBgImage(index) {
				if (this.prizeBgImages.length === 0) {
					// 如果没有提供背景图，返回 null
					return null;
				}
				return this.prizeBgImages[index % this.prizeBgImages.length];
			},
		},
		mounted() {
			this.initLights();
			this.startLightAnimation();
		},
		beforeDestroy() {
			this.stopSpinningAnimation();
			this.stopLightAnimation();
		},
	};
</script>

<style scoped lang="scss">
	/* 轮盘容器样式 */
	.lucky-wheel-container {
		position: relative;
		display: flex;
	}

	.lucky-wheel-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.lucky-wheel-d {
		position: absolute;
		width: 90%;
		height: 90%;
		top: 50%;
		left: 50%;
		z-index: 0;
		transform: translate(-50%, -50%);
	}

	.wheel-image {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		right: 0;
	}

	.wheel-image-1 {
		animation: blink-1 1000ms infinite linear;
	}

	.wheel-image-2 {
		animation: blink-2 1000ms infinite linear;
	}

	@keyframes blink-1 {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}
	}

	@keyframes blink-2 {

		0%,
		100% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}
	}

	/* 轮盘主体样式 */
	.lucky-wheel {
		width: 100%;
		height: 100%;
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		box-sizing: border-box;
		border-radius: 50%;
		overflow: hidden;
		margin: auto;
		transition-property: transform;
		transition-timing-function: cubic-bezier(0.250, 0.460, 0.455, 0.995);
	}

	.lucky-wheel-wrap {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
		box-sizing: border-box;
	}

	/* 奖项扇形样式 */
	.prize-item {
		overflow: hidden;
		position: absolute;
		top: -50%;
		left: 50%;
		width: 100%;
		height: 100%;
		transform-origin: 0 100%;
	}

	/* 奖项内容样式 */
	.prize-content {
		position: absolute;
		padding-top: 16rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		left: -50%;
		bottom: -50%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.prize-content-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 0;
	}

	/* 奖项图片样式 */
	.prize-image {
		width: 40px;
		height: 40px;
		margin-bottom: 5px;
	}

	/* 奖项名称样式 */
	.prize-name {
		font-size: 12px;
		color: #333;
		text-align: center;
		position: relative;
		z-index: 9;
		font-weight: 400;
		font-size: 28rpx;
		color: #DA402B;
	}

	.prize-pro {
		position: relative;
	}

	.prize-pro-txt {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-weight: 400;
		font-size: 14rpx;
		color: #E26241;
		white-space: nowrap;
	}

	/* 指针样式 */
	.pointer {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
		cursor: pointer;
	}

	.pointer-triangle {
		width: 0;
		height: 0;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 40px solid #ff0000; /* 红色三角形 */
		/* 删除 transform: rotate(180deg); 这一行 */
	}
	
	.pointer-heart {
	    animation: heart 1s infinite;
	  }
	
	  @keyframes heart {
	    0% {
	      transform: scale(1);
	    }
	
	    25% {
	      transform: scale(1.03);
	    }
	
	    to {
	      transform: scale(1);
	    }
	  }

	.lights-container {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		pointer-events: none;
	}

	.light {
		position: absolute;
		border-radius: 50%;
	}
</style>